<template>
   <div class="app-container">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
         <el-form-item label="购方名称" prop="buyerName">
            <el-input
               v-model="queryParams.buyerName"
               placeholder="请输入	购方名称"
               clearable
               style="width: 200px"
               @keyup.enter="handleQuery"
            />
         </el-form-item>
         <el-form-item label="运营商" prop="operatorId">
            <el-select
                v-model="queryParams.operatorId"
                placeholder="请选择运营商"
                clearable
                style="width: 240px"
            >
              <el-option
                  v-for="item in operatorList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
              />
            </el-select>
         </el-form-item>
         <el-form-item label="开票状态" prop="openStatus">
          <el-select
              v-model="queryParams.openStatus"
              placeholder="请选择开票状态"
              clearable
              style="width: 240px"
          >
            <el-option
                v-for="item in invoice_status"
                :key="item.value"
                :label="item.label"
                :value="Number(item.value)"
            />
          </el-select>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
         <!-- <el-table-column type="selection" width="55" align="center" /> -->
         <el-table-column label="序号" align="center" prop="id" width="100" />
         <el-table-column label="购方名称" align="center" prop="buyerName" :show-overflow-tooltip="true" />
         <el-table-column label="购方手机" align="center" prop="buyerTel"  show-overflow-tooltip/>
         <el-table-column label="发票图片" align="center" prop="imgUrl" >
            <template slot-scope="{row}">
              <!-- <embed v-if="row.pdfUrl" :src="row.pdfUrl" style="width: 100px; height: 100px"/>
                -->
              <!-- <pdf-viewer
              v-if="row.pdfUrl"
              :srcList="[row.pdfUrl]"
              style="width: 100px; height: 100px"
              ></pdf-viewer> -->
              <el-image
                v-if="row.imgUrl"
                style="width: 100px; height: 100px"
                :src="row.imgUrl"
                :preview-src-list="[row.imgUrl]">
              </el-image>
            </template>
         </el-table-column>
         <el-table-column label="开票状态" align="center" prop="openStatus" >
            <template slot-scope="{row}">
              <dict-tag :options="dict.type.invoice_status" :value="row.openStatus" />
            </template>
         </el-table-column>
         <el-table-column label="发票抬头名称" align="center" prop="titleName"  show-overflow-tooltip/>
         <el-table-column label="发票流水号" align="center" prop="invoiceSerialNum"  show-overflow-tooltip/>
         <el-table-column label="开票渠道类型" align="center" prop="channelType" >
            <template slot-scope="{row}">
              <dict-tag :options="dict.type.invoic_chaner_type" :value="row.channelType" />
            </template>
         </el-table-column>
         <el-table-column label="订单号" align="center" prop="orderNo"  show-overflow-tooltip/>
         <el-table-column label="销方电话" align="center" prop="salerTel"  show-overflow-tooltip/>
         <el-table-column label="开票成功时间" align="center" prop="successTime"  show-overflow-tooltip/>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300">
            <template slot-scope="{row}">
               <el-button v-if="row.channelType == 2 && row.openStatus == 1" link type="primary" icon="Edit" @click="handleDelete(row)"
               v-hasPermi="['system:eaInvoiceConfigChannel:edit']">确认开票</el-button>
               <el-button link type="primary" icon="Delete"
               @click="handleDetail(row)" v-hasPermi="['system:eaInvoiceApplicationDetail:list']" >开票详情</el-button>
            </template>
         </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 详情弹框 -->
      <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body destroy-on-close>
        <div class="diy-mx-8">
          <el-radio-group v-model="detailCurrent" style="margin-bottom: 30px;">
            <el-radio-button label="tabDetail1">详细信息</el-radio-button>
            <el-radio-button label="tabDetail2">发票图片</el-radio-button>
          </el-radio-group>
          <div v-show="detailCurrent === 'tabDetail1'">
            <el-table :data="dataInfo" :header-cell-style="{fontSize:'14px'}">
              <el-table-column prop="goodsName" align="center" label="名称"></el-table-column>
              <el-table-column prop="price" align="center" label="单价"></el-table-column>
              <el-table-column prop="num" align="center" label="数量"></el-table-column>
              <el-table-column prop="taxIncludedAmount" align="center" label="含税金额"></el-table-column>
              <el-table-column prop="taxExcludedAmount" align="center" label="不含税金额"></el-table-column>
              <el-table-column prop="tax" align="center" label="税额"></el-table-column>
              <el-table-column prop="rate" align="center" label="税率">
                <template slot-scope="scope">
                  {{ (Number(scope.row.taxRate) * 100) + '%' }}
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="popTotal>0"
              :total="popTotal"
              :page.sync="popQueryParams.pageNum"
              :limit.sync="popQueryParams.pageSize"
              @pagination="eaInvoiceApplicationDetail"
            />
          </div>
          <div v-show="detailCurrent === 'tabDetail2'" class="flex_zhcenter">
            <!-- <img v-if="form.imgUrl" :src="form.imgUrl"/> -->
            <!-- <pdf-viewer
              v-if="form.pdfUrl"
              :srcList="[form.pdfUrl]"
              style="width: 100%; height: 662px"
              ></pdf-viewer> -->
              <el-image
                v-if="form.imgUrl"
                style="width: 100%; height: 662px"
                :src="form.imgUrl" fit="contain"
                :preview-src-list="[form.imgUrl]">
              </el-image>
            <el-empty v-else description="暂无发票"></el-empty>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="open =false">关 闭</el-button>
        </div>
      </el-dialog>

  </div>
</template>

<script>
import { listEaInvoiceApplication, getEaInvoiceApplication, offlineInvoice,eaInvoiceApplicationDetail, } from "@/api/config/invoiceApplica";
import { eaOperatSelect } from "@/api/station/operator";
import { getDicts } from "@/api/system/dict/data";
// import pdfViewer from '@/components/pdf-viewer/index'
// import pdf from 'vue-pdf'
export default {
  name: 'InvoiceApplica',
  dicts: ['invoice_status','invoice_type','invoice_push_method','invoic_chaner_type'],
  // components: { pdf, pdfViewer },
  data() {
    return {
      //切换
      detailCurrent: 'tabDetail1',
      form: {},// 表单参数
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      queryParams: {// 查询参数
        pageNum: 1,
        pageSize: 10,
      },
      // 总条数
      total: 0,
      rules: {},
      list:[],//页面数据
      operatorList:[],//运营商数据
      //详细信息
      dataInfo: [],
      popQueryParams: {// 查询参数
        pageNum: 1,
        pageSize: 10,
      },
      popTotal: 0,
      invoice_status:[],//过滤后的开票状态
    };
  },
  mounted(){
    this.eaOperatSelect()
    this.getList()
    this.getDicts()
  },
  methods: {
    async getDicts(){//
      let res = await getDicts('invoice_status')
      let data = res.data || []
      data = data.filter(item=>item.dictValue != 0)
      data = data.map(item=>{
        return {
          ...item,
          value:item.dictValue,
          label:item.dictLabel,
        }
      })
      this.invoice_status = data
    },
    handleDetail(e){//配置详情跳转
      this.form = {...e}
      this.popQueryParams.applicationId = e.id
      this.eaInvoiceApplicationDetail()
    },
    async eaInvoiceApplicationDetail() {
      let res = await eaInvoiceApplicationDetail(this.popQueryParams)
      this.dataInfo = res.rows || []
      this.popTotal = res.total || 0
      this.open = true;
      this.title = "详细信息";
    },
    async eaOperatSelect(){//运营商选择列表
      let res = await eaOperatSelect()
      this.operatorList = res.data
    },
    getList() {
      this.loading = true;
      listEaInvoiceApplication(this.queryParams).then(response => {
        this.list = response.rows || [];
        this.total = response.total || 0;
        this.loading = false;
      });
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    handleDelete(row) {//删除
      const del_ids = row.id || this.ids;
      this.$modal.confirm('是否确认开票编号为"' + del_ids + '"的数据项？').then(function() {
        return offlineInvoice({id:del_ids,openStatus:2});
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("开票成功");
      }).catch(() => {});
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryRef");
      this.handleQuery();
    },
  }
}
</script>
